<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Anti-Drone Store</title>
    <meta name="description" content="Get in touch with our anti-drone experts. Professional consultation, technical support, and sales inquiries.">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <!-- Common Styles -->
    <div th:replace="~{fragments/styles :: common-styles}"></div>
    <!-- Header Styles -->
    <div th:replace="~{fragments/header :: header-styles}"></div>

    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #ffffff;
            color: #333333;
            line-height: 1.6;
            overflow-x: hidden;
            padding-top: 70px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 120px 0 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(30,58,138,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }
        
        .page-header-content {
            position: relative;
            z-index: 2;
        }
        
        .breadcrumb {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }
        
        .breadcrumb a {
            color: #64748b;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .breadcrumb a:hover {
            color: #1e3a8a;
        }
        
        .breadcrumb .current {
            color: #1e3a8a;
        }
        
        /* Contact Info Cards */
        .contact-info {
            padding: 80px 0;
        }
        
        .contact-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        
        .contact-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .contact-card:hover {
            transform: translateY(-10px);
            border-color: rgba(30, 58, 138, 0.3);
            box-shadow: 0 20px 40px rgba(30, 58, 138, 0.1);
        }
        
        .contact-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: #fff;
            font-size: 2rem;
        }
        
        .contact-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .contact-card p {
            color: #64748b;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .contact-details {
            color: #1e3a8a;
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .contact-details a {
            color: #1e3a8a;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .contact-details a:hover {
            color: #3b82f6;
        }
        
        /* Contact Form */
        .contact-form-section {
            background: #f8fafc;
            padding: 80px 0;
        }
        
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .form-title {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .form-title h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .form-title p {
            color: #64748b;
            font-size: 1.1rem;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333333;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }
        
        .form-control {
            width: 100%;
            padding: 15px 20px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            color: #333333;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #1e3a8a;
            box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
            background: #ffffff;
        }
        
        .form-control::placeholder {
            color: #666666;
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }
        
        .form-submit {
            text-align: center;
            margin-top: 30px;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: #fff;
            border: none;
            padding: 15px 40px;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 200px;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
        }
        
        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .submit-btn.submitting {
            background: #666;
            cursor: not-allowed;
        }

        .submit-btn.submitting:hover {
            background: #666;
            transform: none;
            box-shadow: none;
        }
        
        /* Messages */
        .message {
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: none;
        }

        .message.success {
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.15), rgba(30, 58, 138, 0.05));
            border: 1px solid rgba(30, 58, 138, 0.4);
            color: #1e3a8a;
        }

        .message.error {
            background: linear-gradient(135deg, rgba(255, 68, 68, 0.15), rgba(255, 68, 68, 0.05));
            border: 1px solid rgba(255, 68, 68, 0.4);
            color: #ff4444;
        }
        
        /* Footer */
        .footer {
            background: #f8fafc;
            border-top: 1px solid rgba(30, 58, 138, 0.2);
            padding: 60px 0 20px;
            margin-top: 80px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-section h4 {
            color: #1e3a8a;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 10px;
        }
        
        .footer-section ul li a {
            color: #666666;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-section ul li a:hover {
            color: #1e3a8a;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            color: #666666;
        }
        
        /* Success Overlay */
        .success-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: none;
        }

        .success-overlay.show {
            display: flex;
            opacity: 1;
        }

        .success-animation {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .success-overlay.show .success-animation {
            transform: scale(1);
        }

        .success-animation h3 {
            color: #1e3a8a;
            margin: 20px 0 10px 0;
            font-size: 1.5rem;
        }

        .success-animation p {
            color: #cccccc;
            margin: 0;
        }

        /* 成功勾选动画 */
        .success-checkmark {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #1e3a8a;
            stroke-miterlimit: 10;
            margin: 0 auto 20px auto;
            box-shadow: inset 0px 0px 0px #1e3a8a;
            animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
            position: relative;
        }

        .success-checkmark .check-icon {
            width: 56px;
            height: 56px;
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 1;
            transform: scale(0);
            animation: scale 0.3s ease-in-out 0.9s both;
        }

        .check-icon .icon-line {
            height: 2px;
            background-color: #1e3a8a;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;
        }

        .check-icon .line-tip {
            top: 46px;
            left: 14px;
            width: 25px;
            transform: rotate(45deg);
            animation: icon-line-tip 0.75s;
        }

        .check-icon .line-long {
            top: 38px;
            right: 8px;
            width: 47px;
            transform: rotate(-45deg);
            animation: icon-line-long 0.75s;
        }

        .check-icon .icon-circle {
            top: -4px;
            left: -4px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 4px solid rgba(30, 58, 138, 0.2);
            position: absolute;
        }

        .check-icon .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
        }

        /* 震动动画 */
        .shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @keyframes fill {
            100% {
                box-shadow: inset 0px 0px 0px 30px #1e3a8a;
            }
        }

        @keyframes scale {
            0%, 100% {
                transform: none;
            }
            50% {
                transform: scale3d(1.1, 1.1, 1);
            }
        }

        @keyframes icon-line-tip {
            0% {
                width: 0;
                left: 1px;
                top: 19px;
            }
            54% {
                width: 0;
                left: 1px;
                top: 19px;
            }
            70% {
                width: 50px;
                left: -8px;
                top: 37px;
            }
            84% {
                width: 17px;
                left: 21px;
                top: 48px;
            }
            100% {
                width: 25px;
                left: 14px;
                top: 45px;
            }
        }

        @keyframes icon-line-long {
            0% {
                width: 0;
                right: 46px;
                top: 54px;
            }
            65% {
                width: 0;
                right: 46px;
                top: 54px;
            }
            84% {
                width: 55px;
                right: 0px;
                top: 35px;
            }
            100% {
                width: 47px;
                right: 8px;
                top: 38px;
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            h1 { font-size: 2rem; }
            h2 { font-size: 1.8rem; }
            h3 { font-size: 1.5rem; }

            .form-container {
                padding: 30px 20px;
            }

            .contact-cards {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div th:replace="~{fragments/header :: header}"></div>

    <!-- Page Header -->
    <section class="page-header">
        <div class="container">
            <div class="page-header-content">
                <nav class="breadcrumb">
                    <a href="/">Home</a>
                    <span>/</span>
                    <span class="current">Contact</span>
                </nav>
                <h1>CONTACT <span class="highlight">US</span></h1>
                <p class="section-subtitle">Get in touch with our anti-drone experts for professional consultation and support</p>
            </div>
        </div>
    </section>

    <!-- Contact Info -->
    <section class="contact-info">
        <div class="container">
            <div class="contact-cards">
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <h3>Phone Support</h3>
                    <p>24/7 technical support and emergency response for all your anti-drone needs</p>
                    <div class="contact-details">
                        <a href="tel:+1-555-123-4567">+86 19867755931</a><br>
                        <small style="color: #666;">Emergency: +86 13723495018</small>
                    </div>
                </div>
                
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3>Email Support</h3>
                    <p>Send us your inquiries and we'll respond within 2 hours during business hours</p>
                    <div class="contact-details">
                        <a href="mailto:forever_6611@aliyun.com">forever_6611@aliyun.com</a><br>
                    </div>
                </div>
                
                <div class="contact-card">
                    <div class="contact-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3>We Chat</h3>
                    <p>Chat with our experts in real-time for immediate assistance and product guidance</p>
                    <div class="contact-details">
                        Available 24/7<br>
                        <small style="color: #666;">+86 13723495018</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form -->
    <section class="contact-form-section">
        <div class="container">
            <div class="form-container">
                <div class="form-title">
                    <h2>GET IN <span class="highlight">TOUCH</span></h2>
                    <p>Fill out the form below and our experts will get back to you within 24 hours</p>
                </div>
                
                <div class="message success" id="successMessage" style="display: none;">
                    <i class="fas fa-check-circle"></i>
                    <span>Thank you for your message! We'll get back to you within 24 hours.</span>
                </div>
                
                <div class="message error" id="errorMessage" style="display: none;">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>Sorry, there was an error sending your message. Please try again.</span>
                </div>
                
                <form id="contactForm" method="post">
                    <div class="form-group">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="Enter your full name">
                    </div>
                    
                    <div class="form-group">
                        <label for="email" class="form-label">Email Address</label>
                        <input type="email" id="email" name="email" class="form-control" placeholder="Enter your email address">
                    </div>
                    
                    <div class="form-group">
                        <label for="company" class="form-label">Company/Organization</label>
                        <input type="text" id="company" name="company" class="form-control" placeholder="Enter your company name">
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea id="message" name="message" class="form-control" placeholder="Please provide details about your requirements, location, and any specific questions..."></textarea>
                    </div>
                    
                    <div class="form-submit">
                        <button type="submit" class="submit-btn" id="submitBtn">
                            <i class="fas fa-paper-plane"></i> SEND MESSAGE
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Office Locations -->
<!--    <section class="office-locations">-->
<!--        <div class="container">-->
<!--            <div class="section-title">-->
<!--                <h2>GLOBAL <span class="highlight">PRESENCE</span></h2>-->
<!--                <p class="section-subtitle">Our offices and partners worldwide provide local support and expertise</p>-->
<!--            </div>-->
<!--            -->
<!--            <div class="office-grid">-->
<!--                <div class="office-card">-->
<!--                    <div class="office-flag">🇺🇸</div>-->
<!--                    <h4>United States</h4>-->
<!--                    <div class="office-type">Headquarters</div>-->
<!--                    <div class="office-address">-->
<!--                        123 Security Boulevard<br>-->
<!--                        Tech City, TC 12345<br>-->
<!--                        United States-->
<!--                    </div>-->
<!--                    <div class="office-contact">-->
<!--                        <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
<!--                <div class="office-card">-->
<!--                    <div class="office-flag">🇬🇧</div>-->
<!--                    <h4>United Kingdom</h4>-->
<!--                    <div class="office-type">European Office</div>-->
<!--                    <div class="office-address">-->
<!--                        456 Defense Street<br>-->
<!--                        London EC1A 1BB<br>-->
<!--                        United Kingdom-->
<!--                    </div>-->
<!--                    <div class="office-contact">-->
<!--                        <a href="tel:+44-20-7123-4567">+44 20 7123 4567</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
<!--                <div class="office-card">-->
<!--                    <div class="office-flag">🇸🇬</div>-->
<!--                    <h4>Singapore</h4>-->
<!--                    <div class="office-type">Asia Pacific Office</div>-->
<!--                    <div class="office-address">-->
<!--                        789 Innovation Avenue<br>-->
<!--                        Singapore 018956<br>-->
<!--                        Singapore-->
<!--                    </div>-->
<!--                    <div class="office-contact">-->
<!--                        <a href="tel:+65-6123-4567">+65 6123 4567</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
<!--                <div class="office-card">-->
<!--                    <div class="office-flag">🇦🇪</div>-->
<!--                    <h4>Dubai</h4>-->
<!--                    <div class="office-type">Middle East Office</div>-->
<!--                    <div class="office-address">-->
<!--                        321 Security Plaza<br>-->
<!--                        Dubai, UAE<br>-->
<!--                        United Arab Emirates-->
<!--                    </div>-->
<!--                    <div class="office-contact">-->
<!--                        <a href="tel:+971-4-123-4567">+971 4 123 4567</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>Anti-Drone Store</h4>
                    <p>Professional counter-UAV equipment for security professionals worldwide.</p>
                </div>
                
                <div class="footer-section">
                    <h4>Products</h4>
                    <ul>
                        <li><a href="#">Detection Systems</a></li>
                        <li><a href="#">Neutralization Equipment</a></li>
                        <li><a href="#">Command Centers</a></li>
                        <li><a href="#">Accessories</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Support</h4>
                    <ul>
                        <li><a href="#">Technical Support</a></li>
                        <li><a href="#">Installation Guide</a></li>
                        <li><a href="#">Warranty</a></li>
                        <li><a href="#">Training</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Contact</h4>
                    <ul>
                        <li><a href="tel:+1-555-123-4567"> +86 19867755931</a></li>
                        <li><a href="mailto:forever_6611@aliyun.com">forever_6611@aliyun.com</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 Anti-Drone Store. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Header Scripts -->
    <div th:replace="~{fragments/header :: header-scripts}"></div>

    <script>
        // Form handling
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contactForm');
            const submitBtn = document.getElementById('submitBtn');
            const successMessage = document.getElementById('successMessage');
            const errorMessage = document.getElementById('errorMessage');
            
            // 表单提交处理
            if (form && submitBtn) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 隐藏之前的消息
                    if (successMessage) successMessage.style.display = 'none';
                    if (errorMessage) errorMessage.style.display = 'none';
                    
                    // 获取表单数据
                    const formData = new FormData(form);
                    const data = {};
                    for (let [key, value] of formData.entries()) {
                        if (value.trim() !== '') {
                            // 只添加非空字段
                            data[key] = value.trim();
                        }
                    }
                    
                    // 检查是否至少填写了一个字段
                    const fieldCount = Object.keys(data).length;
                    if (fieldCount === 0) {
                        if (errorMessage) {
                            errorMessage.querySelector('span').textContent = 'Please fill in at least one field';
                            errorMessage.style.display = 'block';
                        } else {
                            alert('Please fill in at least one field');
                        }
                        return;
                    }
                    
                    // 显示加载状态
                    const originalButtonText = submitBtn.innerHTML;
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> SENDING...';
                    
                    // 发送请求
                    fetch('/api/contact/submit', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                    .then(response => response.json())
                    .then(result => {
                        if (result.code === 200) {
                            // 显示成功消息
                            if (successMessage) {
                                successMessage.querySelector('span').textContent = result.message || 'Thank you for your inquiry! We\'ll get back to you within 24 hours.';
                                successMessage.style.display = 'block';
                            } else {
                                alert(result.message || 'Thank you for your inquiry! We\'ll get back to you within 24 hours.');
                            }
                            form.reset();
                        } else {
                            // 显示错误消息
                            if (errorMessage) {
                                errorMessage.querySelector('span').textContent = result.message || 'Failed to submit inquiry. Please try again.';
                                errorMessage.style.display = 'block';
                            } else {
                                alert(result.message || 'Failed to submit inquiry. Please try again.');
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        if (errorMessage) {
                            errorMessage.querySelector('span').textContent = 'An error occurred while submitting your inquiry. Please try again later.';
                            errorMessage.style.display = 'block';
                        } else {
                            alert('An error occurred while submitting your inquiry. Please try again later.');
                        }
                    })
                    .finally(() => {
                        // 恢复按钮状态
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalButtonText;
                    });
                });
            }
            
            // Email validation
            const emailInput = document.getElementById('email');
            if (emailInput) {
                emailInput.addEventListener('blur', function() {
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (this.value && !emailRegex.test(this.value)) {
                        this.style.borderColor = '#ff4444';
                    } else if (this.value) {
                        this.style.borderColor = '#1e3a8a';
                    }
                });
            }
        });
        
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate');
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.animate-on-scroll').forEach(el => {
            observer.observe(el);
        });
    </script>
    
    <!-- Success Overlay -->
    <div class="success-overlay" id="successOverlay" style="display: none;">
        <div class="success-animation">
            <svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                <circle class="check-icon icon-circle" cx="26" cy="26" r="25" fill="none"/>
                <path class="check-icon icon-line line-tip" fill="none" d="M14 27l5 5 12-12"/>
                <path class="check-icon icon-line line-long" fill="none" d="M18 27l8 8 14-14"/>
                <div class="check-icon icon-fix"></div>
            </svg>
            <h3>MESSAGE SENT!</h3>
            <p>Thank you for contacting us. We'll get back to you within 24 hours.</p>
        </div>
    </div>
</body>
</html>